<template>
  <div id="sub-video" class="content-box">
    <!-- 视频列表展示 -->
    <!-- <MvList :mvList="videoList"> -->
      <!-- <template #header> -->
        <!-- 顶部标签筛选 -->
    <div class="tag-screening">
      <tag-popover
        placement="bottomRight"
        :titleName="tagName"
        :showPopover="showPopover"
        :loading="loading"
        @showDetail="getTagList"
        @closeDetail="closeDetail"
      >
        <template>
          <div class="popover">
            <checkable-tag
              :radioStyle="{
                'width': '100px',
                'margin': '10px 5px',
                'textAlign': 'center'
              }"
              :selectTag="tagName"
              :tagList="allTagList"
              @checked="checked"
            />
          </div>
        </template>
        <template #title>
          <span
            class="pointer reset-all"
            :class="{ 'isActive': tagName === '全部视频' }"
            @click="resetAll"
          >
            全部视频
          </span>
        </template>
      </tag-popover>
      <checkable-tag :tagList="tagList" @checked="checked" :selectTag="tagName" />
    </div>
    <MvList
      v-for="item in videoList"
      :key="item.vid || item.id"
      :playcount="item.playTime || item.playCount"
      :cover="item.coverUrl"
      :videoAuthor="item.creator || item.artists"
      :videoTitle="item.title || item.name"
      :durationms="item.durationms || item.duration"
      @goDetail="event => goDetail(event, item.vid || item.id)"
    ></MvList>
    <LoadingMore
      moreText="暂无更多推荐视频,等等再来吧"
      :more="videoMore"
      @scrollMore="scrollMore"
    />
      <!-- </template> -->
      <!-- <template slot-scope="scope"> -->
        <!-- 视频标题 -->
        <!-- <div class="text-hidden mtop-5" :title="videoTitle(scope)"> -->
          <!-- {{ videoTitle(scope) }} -->
        <!-- </div> -->
        <!-- <div class="text-hidden font-12" style="color: #cfcfcf;" :title="videoAuthor(scope)"> -->
          <!-- {{ videoAuthor(scope) }} -->
        <!-- </div> -->
      <!-- </template> -->
      <!-- <template #more>
        <LoadingMore
          moreText="暂无更多推荐视频,等等再来吧"
          :more="videoMore"
          @scrollMore="scrollMore"
        />
      </template> -->
  </div>
</template>

<script>
import { videoTags, allVideoTags, allVideo, videoGroup } from '@/api/music';
import { checkoutType } from '@/utils/optimize';
import MvList from '@/components/Content/MvList';
import LoadingMore from '@/components/Library/LoadingMore';
import TagPopover from '@/components/Library/TagPopover';
import CheckableTag from '@/components/Library/CheckableTag';

export default {
  name: 'subVideo',

  components: {
    CheckableTag,
    LoadingMore,
    TagPopover,
    MvList
    // APopover: Popover
  },

  data() {
    return {
      tagList: [],
      allTagList: [],
      // 视频列表
      videoList: [],
      // 控制弹框显示隐藏
      showPopover: false,
      // 按钮loading效果
      loading: false,
      // 控制tag名称改变
      tagName: '全部视频',
      // 是否加载更多视频
      videoMore: true,
      // 选中tag的信息
      tagInfo: null,
      // 分页
      offset: 0
    };
  },

  created() {
    this.getVideoTags();
    // this.more = true;
    // this.getAllVideo();
    // const info = JSON.parse(sessionStorage.getItem('tagInfo'));
    // this.tagInfo = info;
    // // 同时修改tagName,使选中状态为上一次
    // this.tagName = info.name;
  },

  methods: {
    async getVideoTags() {
      const res = (await videoTags()).data;
      this.tagList = Object.freeze(res.data);
    },
    // 歌单分类
    async getTagList() {
      // 气泡框显示后,再次点击按钮不在进行调用接口
      if (this.showPopover) {
        this.showPopover = false;
        return;
      }
      this.showPopover = true;
      // 如果已经调用过接口,避免多次请求相同接口
      if (this.allTagList && this.allTagList.length) return;
      this.loading = true;
      const res = (await allVideoTags()).data;
      console.log(res);
      if (res.code === 200) {
        this.loading = false;
        this.allTagList = Object.freeze(res.data);
      }
    },
    // 加载更多
    scrollMore() {
      if (this.tagName === '全部视频') {
        this.getAllVideo();
      }
      if (this.tagName !== '全部视频') {
        this.getVideoGroup(this.tagInfo.id);
      }
    },
    // 获取全部视频
    async getAllVideo() {
      const offset = (this.offset++) * 9;
      const res = (await allVideo(offset)).data;
      this.dealWithList(res);
    },
    // 获取视频标签/分类下的视频
    async getVideoGroup(id) {
      const offset = (this.offset++) * 9;
      const res = (await videoGroup(id, offset)).data;
      this.dealWithList(res);
    },
    // 处理videoList
    dealWithList(res) {
      // 拿到的数据有直播的,需要移除
      const list = res.datas.
      filter(item => item.type !== 7).
      map(item => item.data);
      this.$nextTick(() => {
        this.videoList.push(...list);
        this.videoMore = res.hasmore;
      })
    },
    // 改变tag名字然后关闭弹框
    checked(value) {
      if (this.showPopover) {
        this.showPopover = false;
      }
      this.tagName = value;
      // 点击筛选后应该重置一次list
      this.videoList.length = 0;
      // 重置分页
      this.offset = 0;
      // 因为只有点击按钮才会调出全部标签
      if (this.allTagList && this.allTagList.length) {
        this.tagInfo = this.allTagList.find(item => item.name === value);
      } else {
        this.tagInfo = this.tagList.find(item => item.name === value);
      }
      this.getVideoGroup(this.tagInfo.id);
    },
    // 点击重置视频为全部视频
    resetAll() {
      this.showPopover = false;
      this.tagName = '全部视频';
      // 点击筛选后应该重置一次list
      this.videoList.length = 0;
      this.offset = 0;
      this.videoMore = true;
      this.getAllVideo();
    },
    // 获取视频标题
    // videoTitle(value) {
    //   if (value.title) {
    //     return value.title;
    //   }
    //   return value.name;
    // },
    // 获取视频作者
    // videoAuthor(value) {
    //   if (Array.isArray(value.creator)) {
    //     return `by ${value.creator[0].userName}`;
    //   } else if (value.creator) {
    //     return `by ${value.creator.nickname}`
    //   } else {
    //     return value.artists[0].name;
    //   }
    // },
    // 关闭标签弹框
    closeDetail(value) {
      this.showPopover = value;
    },
    goDetail(event, id) {
      const { aid } = event.target.dataset;
      // 将选中标签信息存储到sessionStorage中,防止关闭窗口下次还是请求之前tag数据。不合理
      // sessionStorage.setItem('tagInfo', JSON.stringify(this.tagInfo));
      if (aid) {
        if (this.tagName === 'MV') {
          this.$router.push({
            name: 'artistdetail',
            query: {
              id: aid
            }
          });
          return;
        }
        this.$router.push({
          name: 'userdetail',
          query: {
            id: aid
          }
        });
      } else {
        // 存储当前点击的视频信息
        // const video = this.videoList.find(item => item.id || item.vid === vid);
        // this.$store.commit('detail/VIDEOINFO', video);
        const type = checkoutType(id);
        // console.log(type);
        // return;
        if (type === 'Number') {
          this.$router.push({ 
            name: 'videodetail',
            query: { 
              mid: id 
            }
          });
          return;
        }
        this.$router.push({ 
          name: 'videodetail',
          query: { 
            vid: id 
          }
        })
      }
    }
  },
};
</script>

<style lang="less" scoped>
#sub-video {
  .tag-screening {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .popover {
      width: 720px;
      min-height: 400px;
      height: 500px;
      overflow-y: scroll;
    }
    .reset-all {
      display: inline-block;
      width: 100px;
      height: 26px;
      line-height: 26px;
      text-align: center;
    }
    .isActive {
      background-color: #fdf5f5 !important;
      color: #ec4141;
      border-radius: 13px;
    }
  }
  // .list-all {
  //   display: flex;
  //   flex-wrap: wrap;
  //   justify-content: space-around;
  // }
  // #mv-list {
  //   height: calc(100% - 66px);
  // }
}
</style>